<!-- 顶部公共导航区域 -->
<template>
  <div class="navbar navbar-default">
    <div class="container container-nav animated fadeInDown">
      <div class="navbar-header">
        <a class="navbar-brand">
          <img src="@/assets/img/logo.png" class="logo_img custom-cursor" @click="go('/home')" />
          <img src="@/assets/img/phoenix-blue.png" class="logo_img custom-cursor" style="display: none" />
        </a>
        <button class="navbar-toggle" data-toggle="collapse" data-target="#shownav">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <img src="@/assets/img/colse_navbar.png" style="display: none; height: 15px" class="navbar_close" />
        </button>
      </div>
      <ul id="shownav" class="nav navbar-nav collapse navbar-collapse">
        <li>
          <a :class="{ active: activeNav === '/home' }" @click="go('/home')">首页</a>
        </li>

        <li class="pc_li_navs">
          <a :class="{ active: activeNav === '/product' }" @click="gohash('#shop')">产品中心</a>
        </li>
        <li class="mob_li_navs">
          产品中心
          <ul>
            <li>
              <!-- <router-link to="/Product#shop">综合营销服务平台</router-link> -->
              <a @click="goh('#shop')">综合营销服务平台</a>
            </li>
            <!--<li><a href="product.html#banksystem">银行系统</a></li>-->
            <li>
              <!-- <router-link to="/Product#minSheng">智慧民生政务平台</router-link> -->
              <a @click="goh('#minSheng')">智慧民生政务平台</a>
            </li>
            <li>
              <!-- <router-link to="/Product#tour">高端旅游定制平台</router-link> -->
              <a @click="goh('#tour')">高端旅游定制平台</a>
            </li>
            <li>
              <!-- <router-link to="/Product#medical">专项医疗互助平台</router-link> -->
              <a @click="goh('#medical')">专项医疗互助平台</a>
            </li>
          </ul>
        </li>
        <li>
          <a :class="{ active: activeNav === '/advertise' }" @click="go('/advertise')">人才招聘</a>
        </li>
        <li>
          <a :class="{ active: activeNav === '/abstract' }" @click="go('/abstract')">关于我们</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import emitter from '@/utils/mitt'
// 路由跳转方法
const activeNav = ref('/home') // 默认选中首页
onMounted(() => {
  emitter.on('customEvent', data => {
    go(data)
  })
  // 产品页路由跳转
  emitter.on('customEventHash', data => {
    gohash(data)
  })
  //navbar background
  $('.navbar-toggle').click(function () {
    $('.navbar-header').toggleClass('active')
    $('.navbar-default .navbar-toggle .icon-bar').toggle()
    $('.navbar_close').toggle()
    $('.navbar-brand').find('.logo_img').toggle()
    $('#shownav').toggleClass('active')
    $('html,body').toggleClass('ovfHiden')
    $('.body_shade').toggle()
    $('.body_shade').css('z-index', '2')
  })

  // 返回顶部
  $(document).ready(function ($) {
    var offset = 0,
      offset_opacity = 1200,
      scroll_top_duration = 200,
      $back_to_top = $('.cd-top')

    $(window).scroll(function () {
      $(this).scrollTop() > offset ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out')
      if ($(this).scrollTop() > offset_opacity) {
        $back_to_top.addClass('cd-fade-out')
      }
    })
    $back_to_top.on('click', function (event) {
      event.preventDefault()
      $('body,html').animate(
        {
          scrollTop: 0
        },
        scroll_top_duration
      )
    })
  })
})
// 路由跳转方法
const router = useRouter()
function go(val) {
  if (typeof val === 'object' && val !== null && val.hasOwnProperty('istg')) {
    activeNav.value = val.patch
    router.push({ path: val.patch })
  } else {
    // 设置当前选中的导航项
    activeNav.value = val
    router.push({ path: val })
    if (window.innerWidth <= 768 || /Mobi|Android|iPhone/i.test(navigator.userAgent)) {
      // console.log('当前是手机网页')
      $('.navbar_close').click()
    } else {
      // console.log('当前是PC网页')
    }
  }
}
function goh(val) {
  router.push({ path: '/Product', hash: val })
  $('.navbar_close').click()
}

function gohash(val) {
  // 设置当前选中的导航项
  activeNav.value = '/product'
  router.push({ path: '/Product', hash: val })
}
</script>

<style scoped>
.body_shade {
  z-index: 2 !important;
}
.custom-cursor {
  cursor: pointer;
}
</style>
